<template>
  <div class="parent">
    <div class="header-bar">
      <router-link to="/my" slot="left">
        <mt-button icon="back" type="danger" style='background: #3B8BFB; color: #fff;border: 1px solid #3B8BFB;'></mt-button>
      </router-link>
      <span class="title">消息</span>
      <span class="text">全部已读</span>
    </div>
    <!-- <mt-header title="消息" class="headers">
      <router-link to="/my" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
      <mt-button slot="right" class="text">全部已读</mt-button>
    </mt-header> -->
    <div class="content">
      <ul class="list">
        <li class="listItem">
          <div class="top">
            <div class="spotParent">
              <span class="spot"><i></i></span>
              <span class="text">系统消息</span>
            </div>
            <div>
              <span class="textGry">15分钟前</span>
            </div>
          </div>
          <div class="btm">
            <span class="msg">工单 20190110002 已派单</span>
            <span class="detailText" @click="detailEvent">查看详情<mt-button icon="back" type="danger" class="btnBack"></mt-button></span>
          </div>
        </li>
        <li class="listItem">
          <div class="top">
            <div class="spotParent">
              <span class="spot"><i></i></span>
              <span class="text">系统消息</span>
            </div>
            <div>
              <span class="textGry">2019-01-09 12:21</span>
            </div>
          </div>
          <div class="btm">
            <span class="msg">工单 201901090001 维修完成</span>
            <span class="detailText" @click="detailEvent">查看详情<mt-button icon="back" type="danger" class="btnBack"></mt-button></span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { Toast } from 'mint-ui'
export default {
  name: 'msg',
  data () {
    return {
    }
  },
  methods: {
    detailEvent () {
      Toast({
        message: '当前版本不可执行此操作，请联系4006-506-803开通正式版本',
        position: 'middle',
        duration: 2000
      })
    }
  }
}
</script>
<style scoped lang="scss">
.parent{
  width: 100%;
  height: 100%;
  background: #f9f9f9;
}
.header-bar{
  width: 100%;
  height: 44px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  background: #3B8BFB;
  .text{
    padding-right: 10px;
    font-size:14px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
  }
  .title{
    font-size:18px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
  }
}
.headers{
  width: 100%;
  height: 44px;
  font-size: 16px;
  .title{
    font-size:16px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
  }
  .text{
    font-size: 13px;
    margin-top: 13px;
  }
}
.list{
  width: 100%;
  .listItem{
    width: 100%;
    height: 65px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    margin-bottom: 10px;
    .top{
      width: 100%;
      height: 35px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .spotParent{
        width: 50%;
        height: 35px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        .spot{
          display: block;
          width: 15px;
          height: 15px;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          i{
            display: block;
            width: 9px;
            height: 9px;
            border-radius: 100%;
            background: red;
          }
        }
        .text{
          font-size:16px;
          font-family:PingFangSC-Regular;
          font-weight:400;
          color:rgba(51,51,51,1);
        }
      }
      .textGry{
        font-size:16px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(159,158,168,1);
      }
    }
    .btm{
      width: 100%;
      height: 30px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding-left: 15px;
      .msg{
        font-size:16px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(51,51,51,1);
      }
      .detailText{
        font-size:12px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:#3B8BFB;
        display: flex;
        flex-direction: row;
        padding: 3px 0;
        .btnBack{
          display: inline-block;
          width: 18px;
          height: 18px;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          transform:rotate(180deg);
          background: transparent;
          color: #3B8BFB;
        }
      }
    }
  }
}
</style>
